<!DOCTYPE html>
<!--上边的这行文字代表本网站是基于HTML5制作的-->

<html lang="en">
<head>

<!--这里设置首页头像的动态效果-->	
<style>
img#qq {
    width: 200px; /* 宽度 */
    background-size: cover; /* 背景大小 */
    border-radius: 200px; /* 边界半径 */
    box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72); /* 盒子阴影 */
    border: 3px solid #00a0ff; /* 边界 */
    opacity: 1; /* 不透明度 */
    margin: 0 auto; /* CSS margin 属性开关 */
    margin-top: 7px; /* 上边距 */
	margin-left: 0px; /* 左边距 */
	margin-bottom: 0px; /* 底边距 */
	transition: all 1.0s; /* 过渡值 */
}
#qq:hover {
    box-shadow: 0 0 10px #fff;
    -webkit-box-shadow: 0 0 19px #fff;
    transform:rotate(360deg);
    -ms-transform:rotate(360deg); 	/* IE 9 */
    -moz-transform:rotate(360deg); 	/* Firefox */
    -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
    -o-transform:rotate(360deg); 	/* Opera */
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}.con{ width:690px; margin:0 auto}
.con a{
</style>
		
	<!--这里设置网站的全局信息，除了主标题外其余部分不建议修改-->
	<meta charset="UTF-8">
	<title>CMCboy</title>
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-app-capable" content="yes">
    <meta name="apple-mobile-app-status-bar-style" content="black">
    
    <!--这里设置的东西类似于副标题吧，主要是给搜索引擎看的-->
    <meta name="description" content="CMCboy">
    <meta name="keywords" content="CMCboy">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="cononico">
    <meta name="application-name" content="Cononico" >

    <!--这里设置网站的全局信息-->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/process.css">
    <link rel="shortcut icon"  type="image/x-icon" href="favicon.ico" />
    
    <script type="text/javascript">
        //设定rem值
        document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth/20 + 'px';
    </script>
</head>
<body>
	
<!--这几行代码用来禁止鼠标右击-->
<script>  
	function stop(){alert("温馨提示：请勿调试网站，您的IP已被记录，重复操作将被拉黑！");return false;}  
	document.oncontextmenu=stop;  
</script>
	
	<!--这里是网站的头部-->
	<header class="head">
        <div class="head_logo_div">
            <a><img class="logo_img" src="images/upload/time.jpg"></a>
        </div>
        <div class="head_nav_div">
             <nav class="head_nav">
                <ul id="nav_ul">
                    <li class="nav_li_on nav_ul_li">Home</li>
                    <li class="nav_ul_li">Skill</li>
                    <li class="nav_ul_li">Experience</li>
                    <li class="nav_ul_li">Hobby</li>
                    <li class="nav_ul_li">Contact</li>
                </ul>
            </nav>
        </div>
        <div class="clear"></div>
    </header>
    
    <ul class="float_btn" id="float_btn">
        <li class="btn_on"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <!--这里加载的是“Home”页面的信息，即主页-->    
    <div class="wrapBox" id="wrapBox">
        <div class="box">
            <img class="box_bg" src="images/upload/pic_1.jpg">
            <div class="box01_content">
                <div class="head_div">
                    <div class="cycle_item">
                        <a href="https://pan.cmcboy.club" class="github_a" id="github_a" target="_blank">
                            <span class="github_icon"></span>
                            <span class="github_text"><p class="item_name">私人云</p></span>
                        </a>
                        <a href="https://dh.cmcboy.club" class="weibo_a" id="weibo_a" target="_blank">
                            <span class="weibo_icon"></span>
                            <span class="weibo_text"><p class="item_name">个人导航</p> </span>
                        </a>
                        <a href="https://www.cmcboy.club" class="blog_a" id="blog_a" target="_blank">
                            <span class="blog_icon"></span>
                            <span class="blog_text"><p class="item_name"> 博客</p></span>
                        </a>


                        <div class="green_cycle">
                            <img class="green_cycle_img" src="images/icon/green_cycle.svg">
                            <div class="yellow_cycle">
                                <img class="yellow_cycle_img" src="images/icon/yellow_cycle.svg">
                                <div class="blue_cycle">
                                    <img class="blue_cycle_img" src="images/icon/blue_cycle.svg">
                                    <div class="head_img_div">
                                        <img class="head_img" src="images/upload/time.jpg" id="qq" class="wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
										
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <h1 class="title">CMCboy</h1>
                <h2 class="title_h2">代码路上雾茫茫......</h2>
                <div id="box01_text">
                <p class="box01_p">不久前还只是一个小学生.</p>
                <p class="box01_p">现在只是一个备战中考的学生党.</p>
                <p class="box01_p">未来会独自在人生之路上越走越远.</p>
                </div>

            </div>
            
        </div>
        
        <!--这里加载的是“Skill”页面的信息，即技能-->
        <div class="box">
            <img class="box_bg" src="images/upload/pic_2.jpg">
            
            <div class="box02_content box_content">
                <div id='bar_container' class="bar_container">
                    <div class='bar mint' data-percent='40' data-skill='Web前端'></div>
					<div class="bar green" data-percent='40' data-skill='程序开发'></div>
                    <div class="bar blue" data-percent='60' data-skill='Office'></div>
                    <div class="bar lila" data-percent='60' data-skill='视频剪辑'></div>
					<div class="bar mint" data-percent='80' data-skill='考试'></div>
					<div class='bar red' data-percent='70' data-skill='人际交往'></div>
                </div>
                <div id="box02_text">
                    <h1>About Skill</h1>
                    <div class="overline"></div>
                    <p>https://www.cmcboy.club</p>
		    <p>https://www.cmcboy.club</p>
					
					
					</div>
                <div class="clear"></div>
            </div>
            
            
        </div>
        
        <!--这里加载的是“Experience”页面的信息，即经验-->
        <div class="box">
            <img class="box_bg" src="images/upload/pic_3.jpg">
            
            <div class="box_content box03_content">
                <ul id="timeUl" class="timeUl">
                    <li>
                        <div>
                            <h1>标题一</h1>
                            <p>此处输入想输入的内容</p>                           
                        </div>
                    </li>
                    <li>
                        <div>
                            <h1>标题二</h1>
                            <p>此处输入想输入的内容</p>  
                        </div>
                    </li>
                    <li>
                       <div>
                            <h1>标题三</h1>
                            <p>此处输入想输入的内容</p>  
                        </div>
                    </li>
                    <li>
                       <div>
                            <h1>标题四</h1>
                            <p>此处输入想输入的内容</p>  
                        </div>
                    </li>
                </ul>
                 <div class="left_div" id="left_div">
                     <img class="left_arrow" src="images/icon/arrowleft.png">
                 </div>
                 <div class="right_div" id="right_div">
                      <img class="right_arrow" src="images/icon/arrowright.png">
                 </div>
            </div>
            
             
        </div>
        
        <!--这里加载的是“Hobby”页面的信息，即爱好-->
        <div class="box">
          <img class="box_bg" src="images/upload/pic_4.jpg">
            <div class="box_content box04_content">
                <h1 class="box04_title">Something Of Hobby</h1>
                <ul class="hobby_content">
                    <li class="hobby_01">
                        <div class="hobby_img_div">
                            <div class="spinner spinner_01"></div>
                            <div class="hobby_img">
                                <img src="images/upload/kapok.jpg">
                            </div>
                            <div class="hobby_img_info">
                                <h1>001</h1>
                                <h2>002</h2>
                            </div>
                        </div>
                        <div class="hobby_text_div">
                            <div class="hobby_img_info_mob">
                                <h1>001/<a>002</a></h1>
                            </div>
                            <p class="about_p">
                               此处输入你的内容  
                            </p>
                        </div>
                    </li>
                    <li class="hobby_02">
                        <div class="hobby_img_div">
                            <div class="spinner spinner_02"></div>
                            <div class="hobby_img">
                                <img src="images/upload/acg.png">
                            </div>
                            <div class="hobby_img_info">
                                <h1>003</h1>
                                <h2>004</h2>
                            </div>
                        </div>
                        <div class="hobby_text_div">
                            <div class="hobby_img_info_mob">
                                <h1>003/<a>004</a></h1>
                            </div>
                            <p class="about_p">
                               此处输入你的内容
                            </p>
                        </div>
                    </li>
                    <li class="hobby_03">
                        <div class="hobby_img_div">
                            <div class="spinner spinner_03"></div>
                            <div class="hobby_img">
                                <img src="images/upload/reading.jpg">
                            </div>
                            <div class="hobby_img_info">
                                <h1>005</h1>
                                <h2>006</h2>
                            </div>
                        </div>
                        <div class="hobby_text_div">
                            <div class="hobby_img_info_mob">
                                <h1>005/<a>006</a></h1>
                            </div>
                            <p class="about_p">
                               此处输入你的内容
                            </p>
                        </div>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
             
        </div>
        
        <!--这里加载的是“Contact”页面的信息，即联系方式-->
        <foot id="foot" class="foot">
            <h1 class="foot_title">Contact With Me</h1>
            <div class="foot_info_main">
                <ul>
                    <li class="github_items">
                        <a href="https://github.com/CMCboy" target="_blank">GitHub</a>
                    </li>
					
		    <li class="QQ_items">
                        <a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=2830524311" target="_blank">QQ</a>
                    
                    </li>
                    <li class="weibo_items">
                        <a href="https://www.cmcboy.club" target="_blank">微博</a>
                    
                    </li>
					
                    <li class="zhihu_items">
                        <a href="https://www.cmcboy.club" target="_blank">知乎</a>
                    
                     </li>
                     <li class="blog_items">
                        <a href="https://www.cmcboy.club" target="_blank">博客</a>
                    
                     </li>
                     <li class="email_items">
                        <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme& %20email=cmcboy@foxmail.com" target="_blank">邮箱</a>
                        <!--这里的“&”符号很神奇，后边不加个空格代码提示有错误，不过不加也是能用的-->
                    </li>
                    <div class="clear"></div>
                </ul>
                
            
            <!--这里加载的是页面最底下的信息-->
            <div class="foot_power">
                <h3>©2020 Powered by 
                    <a href="https://owo.ski" title="IceEnd">CMCboy</a>
                    
                </h3>
            </div>
        </foot>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
<!--代码完结了，撒花撒花-->
 
